<template>
	<view class="container">
		<view class="list-item" v-for="(category, index) in categories" :key="index" @click="navigateToListItem(category)">
			<view class="left-line"></view>
			<text class="item-text">{{ category.channelName }}</text>
			<view class="right-arrow"></view>
		</view>
	</view>
</template>

<script>
	import {
		checkLogin
	} from '@/common/auth.js';
	export default {
		data() {
			return {
				categories: [
					{
						id: 'leader-work',
						channelName: '局领导工作安排',
						position: 'top'
					}
				]
			};
		},
		async onLoad() {

			if (!checkLogin()) {
				return;
			}
            
			await this.fetchCategories();
		},
		methods: {
			async fetchCategories() {
                
				try {
					uni.showLoading({
						title: '加载中...'
					});
					const params = {
						siteCode: 'main',
						__sid: uni.getStorageSync('sessionid'),
						__ajax: 'json'
					};
					const headers = {
						'x-remember': uni.getStorageSync('x-remember')
					};
					const response = await this.$u.api.getSiteCategory(params);
					if (response && response.code === 1 && response.data) {
						this.categories = [
							this.categories[0],
							...response.data
						];
					} else {
						uni.showToast({
							title: response?.msg || '获取栏目失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取栏目失败:', error);
					uni.showToast({
						title: '获取栏目失败',
						icon: 'none'
					});
				} finally {
					uni.hideLoading();
				}
			},
			navigateToListItem(category) {
				uni.navigateTo({
					url: `/pages/sys/new/list-item?categoryId=${category.id}&categoryName=${category.channelName}&position=${category.position}`
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f5f5f5;
	}

	.container {
		padding: 20rpx;
	}

	.list-item {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 15rpx;
		margin-bottom: 10rpx;
		padding: 30rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
		border-bottom: 1rpx dashed #eee;
		&:last-child {
			border-bottom: none;
		}
	}

	.left-line {
		width: 8rpx;
		height: 32rpx;
		background-color: rgb(0, 137, 217);
		border-radius: 4rpx;
		margin-right: 20rpx;
		margin-top: -10rpx;
	}

	.item-text {
		flex: 1;
		font-size: 32rpx;
		color: #333;
		line-height: 1;
	}

	.right-arrow {
		width: 16rpx;
		height: 16rpx;
		border-top: 4rpx solid #999;
		border-right: 4rpx solid #999;
		transform: rotate(45deg);
	}
</style>
